<template>
  <div style="margin-left: 20px">
    <div  style="color: #f30d0d;">----------- Table 表格-----------</div>
    <span  style="color: #f30d0d;"> 基本描述: </span>
    <p>1.用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</p>
    <p>2.stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。</p>
    <p>3.默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。</p>
    <p>4.可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。</p>
     <!-- -->
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column  prop="name"  label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
<!-- 
    <el-table
      :data="tableData"
      border
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column  prop="name"  label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table> -->



    <br><p><span  style="color: #f30d0d;">固定表头:  </span>
       5.纵向内容过多时，可选择固定表头,只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 </p>
    <p>6.横向内容过多时，可选择固定列。固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。 </p>
    <p>7.横纵内容过多时，可选择固定列和表头。固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。</p>
    <p>8.通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。</p>
    <p>9.数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。</p>
    <p>10.选择单行数据时使用色块表示。Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。
      之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，
      设置type属性为index即可显示从 1 开始的索引号。</p>
    <p>11.选择多行数据时使用 Checkbox。实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，
      若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。</p>
    <p>12.对表格进行排序，可快速查找或对比数据。在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false
      可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。
      可以使用sort-method或者sort-by使用自定义的排序规则
      如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
      在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
    </p>
   <!-- height="250" -->
   <!-- :row-class-name="tableRowClassName" -->
    <el-table
      :data="tableData2"
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      max-height="250"
      style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50"> </el-table-column>  
      <el-table-column prop="date" sortable fixed label="日期" width="120"> </el-table-column>
      <el-table-column prop="name"  label="姓名" width="120"> </el-table-column>
      <el-table-column prop="province" label="省份" width="120"> </el-table-column>
      <el-table-column prop="city" label="市区" width="300"> </el-table-column>
      <el-table-column prop="address" label="地址" width="100"> </el-table-column>
      <el-table-column prop="zip" label="邮编" width="100"> </el-table-column>
      <el-table-column fixed="right" label="操作"  width="300"> 
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
       </el-table-column>
    </el-table>

  </div>
</template>

<script>
    export default {
    data: () => ({
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableData2: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
    }),

    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          console.log(row)
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }

    },
  }
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>